<template>
	<view>
		<view class="gt-form-item">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view v-if="required" class="gt-form-required">*</view>
					<view class="gt-form-label">{{label}}</view>
					<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999"
						@click="showDesc()">
					</uni-icons>
				</view>
			</view>
			<view class="gt-form-body">
				<picker :range="listArray" range-key="val" :value="valueList" mode=multiSelector @change="change"
					@columnchange="columnchange" selector-type="auto">
					<view class="gt-form-content">
						<slot #left>
							<view class="gt-form-content-left">
								<view class="gt-form-content-icon iconfont" :class="leftIcon"></view>
								<text class="gt-form-content-text"
									:class="leftIcon && leftText ? 'leftIconTextMargin' : ''">{{leftText}}</text>
							</view>
						</slot>
						<!-- 选择框 -->
						<view class="gt-form-select">
							<view v-if="name && name != '请选择'" class="c-bbb">{{ name }}</view>
							<view v-else class="placeholderClass">{{ placeholder }}</view>
						</view>
						<!-- 右ICON & 右文字 -->
						<view class="gt-form-content-right" v-if="rightIcon || rightText">
							<text class="gt-form-content-text iconfont"
								:class="rightIcon && rightText ? 'rightIconTextMargin' : ''">{{rightText}}</text>
							<view class="gt-form-content-icon iconfont" :class="rightIcon"></view>
						</view>
					</view>
				</picker>
				<view v-if="error!== false" class="gt-form-error">{{error}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-select",
		props: {
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			list: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			placeholderClass: {
				type: String,
				default: 'placeholderClass'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: 'icon-triangledownfill'
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		created() {},
		data() {
			return {
				valueList: [],
				arr: [],
				name:'',
			}
		},
		watch: {
			// valueList(n,o){
			// }
		},
		computed: {
			listArray() {
				if (!this.list) return [];
				let arr = [
					[{
						key: '',
						val: this.placeholder || '请选择',
						parent_key:null
					}]
				];
				let index = 0;
				for (let i in this.list) {
					let row = this.list[i];
					if (typeof row == 'object' && row.key !== undefined && row.val !== undefined) { //对象
						arr[0].push({
							key: row.key,
							val: row.val,
							parent_key: row.parent_key || null
						});
						if(row.key === this.value){
							index = parseInt(i) ;
							this.name = row.val;
						}
					}
				}
				this.valueList = [index];
				this.arr = arr;
				// console.log(this.valueList);
				// console.log(this.arr);
				return arr;
			}
		},
		methods: {
			columnchange(e) {
				// this.isMove = true;
				// let valueList = [];
				// valueList[e.detail.column] = e.detail.value;
				// let clear = false
				// for (let i in this.valueList) {
				// 	if (i == e.detail.column) {
				// 		clear = true;
				// 	} else {
				// 		valueList[i] = clear ? '' : this.valueList[i];
				// 	}
				// }
				// this.valueList = valueList;
			},
			change(e) {
				this.valueList = e.detail.value;
				let arrLength = this.arr.length;
				let columnIndex = this.valueList[this.valueList.length - 1];
				console.log(this.arr[arrLength - 1][columnIndex].key || '')
				this.$emit('input', this.arr[arrLength - 1][columnIndex].key || '')
			}
		}
	}
</script>

<style lang="scss">
	// .block-lg {
	// 	width: 380px !important;
	// }

	// .block-md {
	// 	width: 280px !important;
	// }

	// .block-sm {
	// 	width: 180px !important;
	// }

	// .gt-form-select {
	// 	background-color: #fff;
	// 	border-radius: 5px;
	// 	border: 1px solid #dcdfe6;
	// 	box-sizing: border-box;
	// 	width: 100%;
	// 	// display: flex;
	// 	// flex-flow: row wrap;
	// 	padding: 0 10px
	// }

	// .line-bottom {
	// 	border-top: none;
	// 	border-right: none;
	// 	border-left: none;
	// 	border-radius: 0;
	// }

	// .line-none {
	// 	border: none;
	// 	border-radius: 0;
	// }

	// .gt-form-select-icon {
	// 	height: 38px;
	// 	line-height: 38px;
	// 	text-align: center;
	// 	color: #aaaaaa;
	// }

	// .text-right {
	// 	.gt-form-item-input {
	// 		text-align: right;
	// 	}
	// }

	// .gt-form-select-text {
	// 	font-size: 14px;
	// 	height: 38px;
	// 	line-height: 38px;
	// 	text-align: center;
	// 	color: #aaaaaa;
	// }

	// .leftIconTextMargin {
	// 	margin-left: 3px;
	// }

	// .rightIconTextMargin {
	// 	margin-right: 3px;
	// }

	// .rightIconTextMargin {
	// 	margin-right: 3px;
	// }

	// .gt-form-item-select {
	// 	flex-grow: 1;
	// 	width: 0;
	// 	height: 38px;
	// 	line-height: 38px;
	// 	font-size: 14px;
	// 	padding: 0 5px
	// }

	// .circle-lg {
	// 	border-radius: 25px;
	// }

	// .circle,
	// .circle-md {
	// 	border-radius: 19px;
	// }

	// .circle-sm {
	// 	border-radius: 15px;
	// }

	// .lg {
	// 	padding: 0 12px;

	// 	.gt-form-item-select {
	// 		font-size: 16px;
	// 		width: 50px;
	// 		height: 50px;
	// 		line-height: 50px;
	// 		padding: 0 8px;
	// 	}

	// 	.gt-form-select-icon {
	// 		height: 50px;
	// 		font-size: 18.5px;
	// 		line-height: 50px;
	// 	}

	// 	.gt-form-select-text {
	// 		font-size: 18.5px;
	// 		height: 50px;
	// 		line-height: 50px;
	// 	}
	// }

	// .sm {
	// 	padding: 0 8px;

	// 	.gt-form-item-select {
	// 		height: 30px;
	// 		line-height: 30px;
	// 		padding: 0 5px;
	// 	}

	// 	.gt-form-select-icon {
	// 		height: 30px;
	// 		font-size: 12px;
	// 		line-height: 30px;
	// 		padding: 0;
	// 	}

	// 	.gt-form-select-text {
	// 		font-size: 13px;
	// 		// width: 25px;
	// 		height: 30px;
	// 		line-height: 30px;
	// 	}
	// }

	// .form-item-error {
	// 	padding: 2px 0;
	// 	color: red;
	// 	height: 15px;
	// 	font-size: 10px;
	// }

	.placeholderClass {
		color: #cccccc
	}
</style>
